import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Form, Input, Radio, Select, Button, Icon, Tooltip} from 'antd';
import {history as router} from '@/utils/utils';
import {FormattedMessage, formatMessage} from '@/utils//locale';
import styles from './BaseView.less';
import {updateUser} from "../../../services/user";
import {setUserInfo} from "../../../utils/authority";
import {SAVE_CURRENT_USER} from "../../../models/user/const";


const FormItem = Form.Item;
const {Option} = Select;

@connect(({user}) => ({
  currentUser: user.currentUser,
}))
@Form.create()
class BaseView extends Component {
  componentDidMount() {
    this.setBaseInfo();
  }

  setBaseInfo = () => {
    const {currentUser, form} = this.props;
    Object.keys(form.getFieldsValue()).forEach(key => {
      const obj = {};
      obj[key] = currentUser[key] || null;
      form.setFieldsValue(obj);
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const {form, dispatch,} = this.props;

    form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        // dispatch({
        //   type: 'form/submitRegularForm',
        //   payload: values,
        // });

        const rsp = await updateUser(values);
        dispatch({type: SAVE_CURRENT_USER, payload: rsp.data});
        setUserInfo(rsp.data)
      }
    });
  };


  getViewDom = ref => {
    this.view = ref;
  };

  render() {
    const {
      form: {getFieldDecorator},
    } = this.props;
    return (
      <div className={styles.baseView} ref={this.getViewDom}>
        <div className={styles.left}>
          <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
            <FormItem label={formatMessage({id: 'app.settings.basic.username'})} extra={<Tooltip
              title="用户名更新需重新登录"
            >
              <Icon type="info-circle-o"/>
            </Tooltip>}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({id: 'app.settings.basic.username-message'}, {}),
                  },
                ],
              })(<Input/>)}
            </FormItem>
            <FormItem label={formatMessage({id: 'app.settings.basic.email'})}>
              {getFieldDecorator('email', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({id: 'app.settings.basic.email-message'}, {}),
                  },
                ],
              })(<Input/>)}
            </FormItem>
            <FormItem label={formatMessage({id: 'app.settings.basic.gender'})}>
              {getFieldDecorator('gender', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({id: 'app.settings.basic.gender-message'}, {}),
                  },
                ],
              })(<Radio.Group>
                <Radio.Button value="male">男</Radio.Button>
                <Radio.Button value="female">女</Radio.Button>
              </Radio.Group>)}
            </FormItem>
            {/*<FormItem label={formatMessage({ id: 'app.settings.basic.country' })}>*/}
            {/*{getFieldDecorator('country', {*/}
            {/*rules: [*/}
            {/*{*/}
            {/*required: true,*/}
            {/*message: formatMessage({ id: 'app.settings.basic.country-message' }, {}),*/}
            {/*},*/}
            {/*],*/}
            {/*})(*/}
            {/*<Select style={{ maxWidth: 220 }}>*/}
            {/*<Option value="China">中国</Option>*/}
            {/*</Select>*/}
            {/*)}*/}
            {/*</FormItem>*/}
            {/*<FormItem label={formatMessage({ id: 'app.settings.basic.geographic' })}>*/}
            {/*{getFieldDecorator('geographic', {*/}
            {/*rules: [*/}
            {/*{*/}
            {/*required: true,*/}
            {/*message: formatMessage({ id: 'app.settings.basic.geographic-message' }, {}),*/}
            {/*},*/}
            {/*{*/}
            {/*validator: validatorGeographic,*/}
            {/*},*/}
            {/*],*/}
            {/*})(<GeographicView />)}*/}
            {/*</FormItem>*/}
            <Button type="primary" htmlType="submit">
              <FormattedMessage
                id="app.settings.basic.update"
                defaultMessage="Update Information"
              />
            </Button>
          </Form>
        </div>
      </div>
    );
  }
}

export default BaseView;
